<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字马赛克效果演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #f0f0f0;
        }
        
        .demo-container {
            margin-bottom: 4rem;
            padding: 2rem;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h2 {
            color: #333;
            border-bottom: 2px solid #666;
            padding-bottom: 0.5rem;
            margin-top: 0;
        }
        
        .original-text {
            font-size: 40px;
            margin: 1rem 0;
            color: #333;
        }

        /* 方法1：text-shadow叠加实现 */
        .mosaic-text-1 {
            font-weight: normal;
            color: transparent;
            text-shadow: 
                0 0 2px #3498db,
                2px 0 4px #3498db,
                0 4px 2px #3498db,
                2px 4px 2px #3498db,
                2px 0 4px #3498db,
                2px 2px 4px #3498db,
                0 2px 4px #3498db,
                4px 2px 2px #3498db,
                2px 8px 4px #3498db;
            letter-spacing: -2px;
        }

        /* 方法2：background-clip和filter结合 */
        .mosaic-text-2 {
            font-size: 100px;
            font-weight: bold;
            color: transparent;
            background-image: linear-gradient(45deg, #e74c3c 25%, #c0392b 25%, #c0392b 50%, #e74c3c 50%, #e74c3c 75%, #c0392b 75%);
            background-size: 16px 16px;
            -webkit-background-clip: text;
            background-clip: text;
            filter: blur(1px);
        }

        /* 方法3：SVG滤镜相关样式 */
        .mosaic-text-3 {
            font-size: 80px;
            font-weight: bold;
            color: #2ecc71;
            filter: url(#mosaic);
        }
    </style>
</head>
<body>
    <h1>CSS文字马赛克效果演示</h1>
    
    <!-- SVG滤镜定义（用于方法3） -->
    <svg width="0" height="0">
        <filter id="mosaic" x="0" y="0" width="100%" height="100%">
            <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" result="noise"/>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
    </svg>

    <!-- 方法1演示 -->
    <div class="demo-container">
        <h2>方法1：text-shadow叠加实现</h2>
        <p>原始文字：</p>
        <div class="original-text">Hello world</div>
        <p>马赛克效果：</p>
        <div class="mosaic-text-1">Hello world</div>
        <p>说明：通过多层文字阴影叠加形成块状模糊效果，调整阴影的间距和颜色可以改变效果</p>
    </div>

    <!-- 方法2演示 -->
    <div class="demo-container">
        <h2>方法2：background-clip和filter结合</h2>
        <p>原始文字：</p>
        <div class="original-text">马赛克效果</div>
        <p>马赛克效果：</p>
        <div class="mosaic-text-2">马赛克效果</div>
        <p>说明：使用背景图案填充文字，通过模糊滤镜增强块状感，background-size控制马赛克块大小</p>
    </div>

    <!-- 方法3演示 -->
    <div class="demo-container">
        <h2>方法3：SVG滤镜实现</h2>
        <p>原始文字：</p>
        <div class="original-text">马赛克效果</div>
        <p>马赛克效果：</p>
        <div class="mosaic-text-3">马赛克效果</div>
        <p>说明：通过SVG定义的滤镜实现更精确的块状效果，调整scale值可以改变马赛克块大小</p>
    </div>
</body>
</html>